<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
		<meta name="author" content="Coderthemes">

		<link rel="shortcut icon" href="assets/images/favicon_1.ico">

		<title>Ubold - Responsive Admin Dashboard Template</title>

		<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/core.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/components.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script src="assets/js/modernizr.min.js"></script>

	</head>

	<body class="fixed-left">

		<!-- Begin page -->
		<div id="wrapper">

            <!-- Top Bar Start -->
            <div class="topbar">

                <!-- LOGO -->
                <div class="topbar-left">
                    <div class="text-center">
                        <a href="index.html" class="logo"><i class="icon-magnet icon-c-logo"></i><span>Ub<i class="md md-album"></i>ld</span></a>
                    </div>
                </div>

                <!-- Button mobile view to collapse sidebar menu -->
                <div class="navbar navbar-default" role="navigation">
                    <div class="container">
                        <div class="">
                            <div class="pull-left">
                                <button class="button-menu-mobile open-left">
                                    <i class="ion-navicon"></i>
                                </button>
                                <span class="clearfix"></span>
                            </div>

                            <form role="search" class="navbar-left app-search pull-left hidden-xs">
			                     <input type="text" placeholder="Search..." class="form-control">
			                     <a href=""><i class="fa fa-search"></i></a>
			                </form>


                            <ul class="nav navbar-nav navbar-right pull-right">
                                <li class="dropdown hidden-xs">
                                    <a href="#" data-target="#" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="true">
                                        <i class="icon-bell"></i> <span class="badge badge-xs badge-danger">3</span>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-lg">
                                        <li class="notifi-title"><span class="label label-default pull-right">New 3</span>Notification</li>
                                        <li class="list-group nicescroll notification-list">
                                           <!-- list item-->
                                           <a href="javascript:void(0);" class="list-group-item">
                                              <div class="media">
                                                 <div class="pull-left p-r-10">
                                                    <em class="fa fa-diamond fa-2x text-primary"></em>
                                                 </div>
                                                 <div class="media-body">
                                                    <h5 class="media-heading">A new order has been placed A new order has been placed</h5>
                                                    <p class="m-0">
                                                        <small>There are new settings available</small>
                                                    </p>
                                                 </div>
                                              </div>
                                           </a>

                                           <!-- list item-->
                                           <a href="javascript:void(0);" class="list-group-item">
                                              <div class="media">
                                                 <div class="pull-left p-r-10">
                                                    <em class="fa fa-cog fa-2x text-custom"></em>
                                                 </div>
                                                 <div class="media-body">
                                                    <h5 class="media-heading">New settings</h5>
                                                    <p class="m-0">
                                                        <small>There are new settings available</small>
                                                    </p>
                                                 </div>
                                              </div>
                                           </a>

                                           <!-- list item-->
                                           <a href="javascript:void(0);" class="list-group-item">
                                              <div class="media">
                                                 <div class="pull-left p-r-10">
                                                    <em class="fa fa-bell-o fa-2x text-danger"></em>
                                                 </div>
                                                 <div class="media-body">
                                                    <h5 class="media-heading">Updates</h5>
                                                    <p class="m-0">
                                                        <small>There are <span class="text-primary font-600">2</span> new updates available</small>
                                                    </p>
                                                 </div>
                                              </div>
                                           </a>

                                           <!-- list item-->
                                           <a href="javascript:void(0);" class="list-group-item">
                                              <div class="media">
                                                 <div class="pull-left p-r-10">
                                                    <em class="fa fa-user-plus fa-2x text-info"></em>
                                                 </div>
                                                 <div class="media-body">
                                                    <h5 class="media-heading">New user registered</h5>
                                                    <p class="m-0">
                                                        <small>You have 10 unread messages</small>
                                                    </p>
                                                 </div>
                                              </div>
                                           </a>

                                           <!-- list item-->
                                           <a href="javascript:void(0);" class="list-group-item">
                                              <div class="media">
                                                 <div class="pull-left p-r-10">
                                                    <em class="fa fa-diamond fa-2x text-primary"></em>
                                                 </div>
                                                 <div class="media-body">
                                                    <h5 class="media-heading">A new order has been placed A new order has been placed</h5>
                                                    <p class="m-0">
                                                        <small>There are new settings available</small>
                                                    </p>
                                                 </div>
                                              </div>
                                           </a>

                                           <!-- list item-->
                                            <a href="javascript:void(0);" class="list-group-item">
                                                <div class="media">
                                                    <div class="pull-left p-r-10">
                                                     <em class="fa fa-cog fa-2x text-custom"></em>
                                                    </div>
                                                    <div class="media-body">
                                                      <h5 class="media-heading">New settings</h5>
                                                      <p class="m-0">
                                                        <small>There are new settings available</small>
                                                    </p>
                                                    </div>
                                              </div>
                                           </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);" class="list-group-item text-right">
                                                <small class="font-600">See all notifications</small>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="hidden-xs">
                                    <a href="#" id="btn-fullscreen" class="waves-effect waves-light"><i class="icon-size-fullscreen"></i></a>
                                </li>
                                <li class="hidden-xs">
                                    <a href="#" class="right-bar-toggle waves-effect waves-light"><i class="icon-settings"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="" class="dropdown-toggle profile" data-toggle="dropdown" aria-expanded="true"><img src="assets/images/users/avatar-1.jpg" alt="user-img" class="img-circle"> </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="javascript:void(0)"><i class="ti-user m-r-5"></i> Profile</a></li>
                                        <li><a href="javascript:void(0)"><i class="ti-settings m-r-5"></i> Settings</a></li>
                                        <li><a href="javascript:void(0)"><i class="ti-lock m-r-5"></i> Lock screen</a></li>
                                        <li><a href="javascript:void(0)"><i class="ti-power-off m-r-5"></i> Logout</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <!--/.nav-collapse -->
                    </div>
                </div>
            </div>
            <!-- Top Bar End -->


            <!-- ========== Left Sidebar Start ========== -->

            <div class="left side-menu">
                <div class="sidebar-inner slimscrollleft">
                    <!--- Divider -->
                    <div id="sidebar-menu">
                        <ul>

                        	<li class="text-muted menu-title">Navigation</li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-home"></i> <span> Dashboard </span> </a>
                                <ul class="list-unstyled">
                                    <li><a href="index.html">Dashboard 1</a></li>
                                    <li><a href="dashboard_2.html">Dashboard 2</a></li>
                                    <li><a href="dashboard_3.html">Dashboard 3</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect active"><i class="ti-paint-bucket"></i> <span> UI Kit </span> </a>
                                <ul class="list-unstyled">
                                    <li><a href="ui-buttons.html">Buttons</a></li>
                                    <li><a href="ui-panels.html">Panels</a></li>
                                    <li><a href="ui-portlets.html">Portlets</a></li>
                                    <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
                                    <li><a href="ui-tabs.html">Tabs</a></li>
                                    <li><a href="ui-modals.html">Modals</a></li>
                                    <li><a href="ui-progressbars.html">Progress Bars</a></li>
                                    <li><a href="ui-notification.html">Notification</a></li>
                                    <li><a href="ui-images.html">Images</a></li>
                                    <li><a href="ui-carousel.html">Carousel</a>
                                    <li><a href="ui-bootstrap.html">Bootstrap UI</a></li>
                                    <li class="active"><a href="ui-typography.html">Typography</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-light-bulb"></i><span class="label label-primary pull-right">6</span><span> Components </span> </a>
                                <ul class="list-unstyled">
                                    <li><a href="components-grid.html">Grid</a></li>
                                    <li><a href="components-widgets.html">Widgets</a></li>
                                    <li><a href="components-nestable-list.html">Nesteble</a></li>
                                    <li><a href="components-range-sliders.html">Range sliders</a></li>
                                    <li><a href="components-animation.html">Animation</a></li>
                                    <li><a href="components-sweet-alert.html">Sweet Alerts</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-spray"></i> <span> Icons </span> </a>
                                <ul class="list-unstyled">
                                	<li><a href="icons-glyphicons.html">Glyphicons</a></li>
                                    <li><a href="icons-materialdesign.html">Material Design</a></li>
                                    <li><a href="icons-ionicons.html">Ion Icons</a></li>
                                    <li><a href="icons-fontawesome.html">Font awesome</a></li>
                                    <li><a href="icons-themifyicon.html">Themify Icons</a></li>
                                    <li><a href="icons-simple-line.html">Simple line Icons</a></li>
                                    <li><a href="icons-weather.html">Weather Icons</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-pencil-alt"></i><span> Forms </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="form-elements.html">General Elements</a></li>
                                    <li><a href="form-advanced.html">Advanced Form</a></li>
                                    <li><a href="form-validation.html">Form Validation</a></li>
                                    <li><a href="form-pickers.html">Form Pickers</a></li>
                                    <li><a href="form-wizard.html">Form Wizard</a></li>
                                    <li><a href="form-mask.html">Form Masks</a></li>
                                    <li><a href="form-summernote.html">Summernote</a></li>
                                    <li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
                                    <li><a href="form-uploads.html">Multiple File Upload</a></li>
                                    <li><a href="form-xeditable.html">X-editable</a></li>
                                    <li><a href="form-image-crop.html">Image Crop</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-menu-alt"></i><span>Tables </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="tables-basic.html">Basic Tables</a></li>
                                    <li><a href="tables-datatable.html">Data Table</a></li>
                                    <li><a href="tables-editable.html">Editable Table</a></li>
                                    <li><a href="tables-responsive.html">Responsive Table</a></li>
                                    <li><a href="tables-foo-tables.html">FooTable</a></li>
                                    <li><a href="tables-bootstrap.html">Bootstrap Tables</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-bar-chart"></i><span class="label label-pink pull-right">10</span><span> Charts </span></a>
                                <ul class="list-unstyled">
                                	<li><a href="chart-flot.html">Flot Chart</a></li>
                                    <li><a href="chart-morris.html">Morris Chart</a></li>
                                    <li><a href="chart-chartjs.html">Chartjs</a></li>
                                    <li><a href="chart-peity.html">Peity Charts</a></li>
                                    <li><a href="chart-chartist.html">Chartist Charts</a></li>
                                    <li><a href="chart-c3.html">C3 Charts</a></li>
                                    <li><a href="chart-nvd3.html"> Nvd3 Charts</a></li>
                                    <li><a href="chart-sparkline.html">Sparkline charts</a></li>
                                    <li><a href="chart-radial.html">Radial charts</a></li>
                                    <li><a href="chart-other.html">Other Chart</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-location-pin"></i><span> Maps </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="map-google.html"> Google Map</a></li>
                                    <li><a href="map-vector.html"> Vector Map</a></li>
                                </ul>
                            </li>

                            <li class="text-muted menu-title">More</li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-files"></i><span> Pages </span></a>
                                <ul class="list-unstyled">
                                	<li><a href="page-starter.html">Starter Page</a></li>
                                    <li><a href="page-login.html">Login</a></li>
                                    <li><a href="page-login-v2.html">Login v2</a></li>
                                    <li><a href="page-register.html">Register</a></li>
                                    <li><a href="page-register-v2.html">Register v2</a></li>
                                    <li><a href="page-signup-signin.html">Signin - Signup</a></li>
                                    <li><a href="page-recoverpw.html">Recover Password</a></li>
                                    <li><a href="page-lock-screen.html">Lock Screen</a></li>
                                    <li><a href="page-400.html">Error 400</a></li>
                                    <li><a href="page-403.html">Error 403</a></li>
                                    <li><a href="page-404.html">Error 404</a></li>
                                    <li><a href="page-404_alt.html">Error 404-alt</a></li>
                                    <li><a href="page-500.html">Error 500</a></li>
                                    <li><a href="page-503.html">Error 503</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-gift"></i><span> Extras </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="extra-profile.html">Profile</a></li>
                                    <li><a href="extra-timeline.html">Timeline</a></li>
                                    <li><a href="extra-sitemap.html">Site map</a></li>
                                    <li><a href="extra-invoice.html">Invoice</a></li>
                                    <li><a href="extra-email-template.html">Email template</a></li>
                                    <li><a href="extra-maintenance.html">Maintenance</a></li>
                                    <li><a href="extra-coming-soon.html">Coming-soon</a></li>
                                    <li><a href="extra-faq.html">FAQ</a></li>
                                    <li><a href="extra-search-result.html">Search result</a></li>
                                    <li><a href="extra-gallery.html">Gallery</a></li>
                                    <li><a href="extra-pricing.html">Pricing</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-crown"></i><span class="label label-success pull-right">3</span><span> Apps </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="apps-inbox.html"> Email</a></li>
                                    <li><a href="apps-calendar.html"> Calendar</a></li>
                                    <li><a href="apps-contact.html"> Contact</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-widget"></i><span> Layouts </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="layout-leftbar_2.html"> Leftbar with User</a></li>
                                    <li><a href="layout-menu-collapsed.html"> Menu Collapsed</a></li>
                                    <li><a href="layout-menu-small.html"> Small Menu</a></li>
                                    <li><a href="layout-header_2.html"> Header style</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="ti-share"></i><span>Multi Level </span></a>
                                <ul>
                                    <li class="has_sub">
                                        <a href="javascript:void(0);" class="waves-effect"><span>Menu Level 1.1</span> </a>
                                        <ul style="">
                                            <li><a href="javascript:void(0);"><span>Menu Level 2.1</span></a></li>
                                            <li><a href="javascript:void(0);"><span>Menu Level 2.2</span></a></li>
                                            <li><a href="javascript:void(0);"><span>Menu Level 2.3</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);"><span>Menu Level 1.2</span></a>
                                    </li>
                                </ul>
                            </li>

                            <li class="text-muted menu-title">Extra</li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-user"></i><span> Crm </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="crm-dashboard.html"> Dashboard </a></li>
                                    <li><a href="crm-contact.html"> Contacts </a></li>
                                    <li><a href="crm-opportunities.html"> Opportunities </a></li>
                                    <li><a href="crm-leads.html"> Leads </a></li>
                                    <li><a href="crm-customers.html"> Customers </a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="#" class="waves-effect"><i class="ti-shopping-cart"></i><span> eCommerce </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="ecommerce-dashboard.html"> Dashboard</a></li>
                                    <li><a href="ecommerce-products.html"> Products</a></li>
                                    <li><a href="ecommerce-product-detail.html"> Product Detail</a></li>
                                    <li><a href="ecommerce-orders.html"> Orders</a></li>
                                    <li><a href="ecommerce-sellers.html"> Sellers</a></li>
                                </ul>
                            </li>

                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
			<!-- Left Sidebar End -->

			<!-- ============================================================== -->
			<!-- Start right Content here -->
			<!-- ============================================================== -->
			<div class="content-page">
				<!-- Start content -->
				<div class="content">
					<div class="container">

						<!-- Page-Title -->
						<div class="row">
							<div class="col-sm-12">
								<h4 class="page-title">Typography</h4>
								<ol class="breadcrumb">
									<li>
										<a href="#">Ubold</a>
									</li>
									<li>
										<a href="#">UI Kit</a>
									</li>
									<li class="active">
										Typography
									</li>
								</ol>
							</div>
						</div>

						<!-- Row start -->
						<div class="row">
							<div class="col-md-12">
								<div class="">
									<div class="card-box">
										<div class="row">
											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Headings</b></h4>
												<p class="text-muted m-b-15 font-13">
													All HTML headings, <code>
														&lt;h1&gt;</code>
													through <code>
														&lt;h6&gt;</code>
													, are available. <code>
														.h1</code>
													through <code>
														.h6</code>
													classes are also available, for when you want to match the font styling of a heading but
													still want your text to be displayed inline.
												</p>

												<h1>h1. Heading 1</h1>
												<h2>h2. Heading 2</h2>
												<h3>h3. Heading 3</h3>
												<h4>h4. Heading 4</h4>
												<h5>h5. Heading 5</h5>
												<h6 class="m-b-0">h6. Heading 6</h6>
											</div>

											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Styled Headings</b></h4>
												<p class="text-muted m-b-15 font-13">
													Create lighter, secondary text in any heading with a generic <code>
														&lt;small&gt;</code>
													tag or the <code>
														.small</code>
													class.
												</p>

												<h1>Heading 1 <small>Secondary Text</small></h1>
												<h2>Heading 2 <small>Secondary Text</small></h2>
												<h3>Heading 3 <small>Secondary Text</small></h3>
												<h4>Heading 4 <small>Secondary Text</small></h4>
												<h5>Heading 5 <small>Secondary Text</small></h5>
												<h6>Heading 6 <small>Secondary Text</small></h6>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<!-- End of Row -->

						<!-- Row start -->
						<div class="row">
							<div class="col-md-12">
								<div class="">
									<div class="card-box">
										<div class="row">
											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Inline text elements</b></h4>

												<p class="text-muted m-t-15 m-b-5 font-13">
													Make a paragraph stand out by adding <code>
														.lead</code>
													.
												</p>
												<p class="lead m-t-0">
													Your title goes here
												</p>

												<p class="text-muted m-t-20 m-b-5 font-13">
													For highlighting a run of text due to its relevance in another context, use the <code>
														&lt;mark&gt;</code>
													tag.
												</p>
												You can use the mark tag to
												<mark>
													highlight
												</mark> text.

												<p class="text-muted m-t-20 m-b-5 font-13">
													For indicating blocks of text that have been deleted use the <code>
														&lt;del&gt;</code>
													tag.
												</p>
												<del>This line of text is meant to be treated as deleted text.</del>

												<p class="text-muted m-t-20 m-b-5 font-13">
													For indicating additions to the document use the <code>
														&lt;ins&gt;</code>
													tag.
												</p>
												<ins>This line of text is meant to be treated as an addition to the document.</ins>

												<p class="text-muted m-t-20 m-b-5 font-13">
													For emphasizing a snippet of text with a heavier font-weight. <code>
														&lt;strong&gt;</code>
												</p>
												<strong>rendered as bold text</strong>

												<p class="text-muted m-t-20 m-b-5 font-13">
													For emphasizing a snippet of text with italics. <code>
														&lt;em&gt;</code>
												</p>
												<em>rendered as italicized text</em>

											</div>

											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Contextual Text Colors</b></h4>

												<p class="text-muted m-t-20 m-b-5 font-13">
													Use classes <code>
														.text-custom</code>
													,<code>
													.text-primary</code>
													etc. to highlight text
												</p>

												<p class="text-custom">
													Etiam porta sem malesuada magna mollis euismod.
												</p>
												<p class="text-pink">
													Donec ullamcorper nulla non metus auctor fringilla.
												</p>
												<p class="text-muted">
													Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
												</p>
												<p class="text-primary">
													Nullam id dolor id nibh ultricies vehicula ut id elit.
												</p>
												<p class="text-success">
													Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
												</p>
												<p class="text-info">
													Maecenas sed diam eget risus varius blandit sit amet non magna.
												</p>
												<p class="text-warning">
													Etiam porta sem malesuada magna mollis euismod.
												</p>
												<p class="text-danger">
													Donec ullamcorper nulla non metus auctor fringilla.
												</p>
												<p class="text-purple">
													Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
												</p>
											</div>

										</div>
									</div>
								</div>
							</div>

						</div>
						<!-- End of Row -->

						<!-- Row start -->
						<div class="row">
							<div class="col-md-12">
								<div class="">
									<div class="card-box">
										<div class="row">
											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Addresses</b></h4>
												<p class="text-muted m-b-15 font-13">
													Present contact information for the nearest ancestor or the entire body of work. Preserve formatting
													by ending all lines with <code>
														&lt;br&gt;</code>
													.
												</p>

												<address>
													<strong>Twitter, Inc.</strong>
													<br>
													795 Folsom Ave, Suite 600
													<br>
													San Francisco, CA 94107
													<br>
													<abbr title="Phone">P:</abbr> (123) 456-7890
												</address>

												<address>
													<strong>Full Name</strong>
													<br>
													<a href="mailto:#">first.last@example.com</a>
												</address>
											</div>

											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Blockquotes</b></h4>
												<p class="text-muted m-b-15 font-13">
													Add a <code>
														&lt;footer&gt;</code>
													for identifying the source. Wrap the name of the source work in <code>
														&lt;cite&gt;</code>
													.
												</p>

												<blockquote>
													<p>
														Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
													</p>
													<footer>
														Someone famous in <cite title="Source Title">Source Title</cite>
													</footer>
												</blockquote>

												<p class="text-muted m-b-15 m-t-20 font-13">
													Add <code>
														.blockquote-reverse</code>
													for a blockquote with right-aligned content.
												</p>

												<blockquote class="blockquote-reverse m-b-0">
													<p>
														Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
													</p>
													<footer>
														Someone famous in <cite title="Source Title">Source Title</cite>
													</footer>
												</blockquote>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<!-- End of Row -->

						<!-- Row start -->
						<div class="row">
							<div class="col-md-12">
								<div class="">
									<div class="card-box">
										<div class="row">
											<div class="col-md-4">
												<h4 class="m-t-0 header-title"><b>Unordered</b></h4>
												<p class="text-muted m-b-15 font-13">
													A list of items in which the order does not explicitly matter.
												</p>

												<ul>
													<li>
														Lorem ipsum dolor sit amet
													</li>
													<li>
														Consectetur adipiscing elit
													</li>
													<li>
														Integer molestie lorem at massa
													</li>
													<li>
														Facilisis in pretium nisl aliquet
													</li>
													<li>
														Nulla volutpat aliquam velit
														<ul>
															<li>
																Phasellus iaculis neque
															</li>
															<li>
																Purus sodales ultricies
															</li>
															<li>
																Vestibulum laoreet porttitor sem
															</li>
															<li>
																Ac tristique libero volutpat at
															</li>
														</ul>
													</li>
													<li>
														Faucibus porta lacus fringilla vel
													</li>
													<li>
														Aenean sit amet erat nunc
													</li>
													<li>
														Eget porttitor lorem
													</li>
												</ul>
											</div>

											<div class="col-md-4">
												<h4 class="m-t-0 header-title"><b>Ordered</b></h4>
												<p class="text-muted m-b-15 font-13">
													A list of items in which the order does explicitly matter.
												</p>

												<ol>
													<li>
														Lorem ipsum dolor sit amet
													</li>
													<li>
														Consectetur adipiscing elit
													</li>
													<li>
														Integer molestie lorem at massa
													</li>
													<li>
														Facilisis in pretium nisl aliquet
													</li>
													<li>
														Nulla volutpat aliquam velit
													</li>
													<li>
														Faucibus porta lacus fringilla vel
													</li>
													<li>
														Aenean sit amet erat nunc
													</li>
													<li>
														Eget porttitor lorem
													</li>
												</ol>
											</div>

											<div class="col-md-4">
												<h4 class="m-t-0 header-title"><b>Unstyled</b></h4>
												<p class="text-muted m-b-15 font-13">
													Remove the default <code>
														list-style</code>
													and left margin
													on list items (immediate children only). <strong>This only applies to immediate children
													list items</strong>, meaning you will need to add the class for any nested lists as well.
												</p>

												<ul class="list-unstyled">
													<li>
														Lorem ipsum dolor sit amet
													</li>
													<li>
														Integer molestie lorem at massa
														<ul>
															<li>
																Phasellus iaculis neque
															</li>
															<li>
																Purus sodales ultricies
															</li>
														</ul>
													</li>
													<li>
														Faucibus porta lacus fringilla vel
													</li>
													<li>
														Eget porttitor lorem
													</li>
												</ul>

												<h4><b>Inline</b></h4>
												<p class="text-muted m-b-15 font-13">
													Place all list items on a single line with <code>
														display: inline-block;</code>
													and some light padding.
												</p>

												<ul class="list-inline m-b-0">
													<li>
														Lorem ipsum
													</li>
													<li>
														Phasellus iaculis
													</li>
													<li>
														Nulla volutpat
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<!-- End of Row -->

						<!-- Row start -->
						<div class="row">
							<div class="col-md-12">
								<div class="">
									<div class="card-box">
										<div class="row">
											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Description</b></h4>
												<p class="text-muted m-b-15 font-13">
													A list of terms with their associated descriptions
												</p>

												<dl class="m-b-0">
													<dt>
														Description lists
													</dt>
													<dd>
														A description list is perfect for defining terms.
													</dd>
													<dt>
														Euismod
													</dt>
													<dd>
														Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
													</dd>
													<dd>
														Donec id elit non mi porta gravida at eget metus.
													</dd>
													<dt>
														Malesuada porta
													</dt>
													<dd>
														Etiam porta sem malesuada magna mollis euismod.
													</dd>
												</dl>
											</div>

											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Horizontal description</b></h4>
												<p class="text-muted m-b-15 font-13">
													Make terms and descriptions in <code>
														&lt;dl&gt;</code>
													line up side-by-
													side. Starts off stacked like default <code>
														&lt;dl&gt;</code>
													s, but when the navbar expands, so do these.
												</p>

												<dl class="dl-horizontal m-b-0">
													<dt>
														Description lists
													</dt>
													<dd>
														A description list is perfect for defining terms.
													</dd>
													<dt>
														Euismod
													</dt>
													<dd>
														Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
													</dd>
													<dd>
														Donec id elit non mi porta gravida at eget metus.
													</dd>
													<dt>
														Malesuada porta
													</dt>
													<dd>
														Etiam porta sem malesuada magna mollis euismod.
													</dd>
													<dt>
														Felis euismod semper eget lacinia
													</dt>
													<dd>
														Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
													</dd>
												</dl>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<!-- End of Row -->
						
						
						
						<!-- Row start -->
						<div class="row">
							<div class="col-md-12">
								<div class="">
									<div class="card-box">
										<div class="row">
											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Dropcap</b></h4>
												<p class="text-muted m-b-15 font-13">
													Use the class <code>.dropcap</code> let the first letter drop down of content texts.
												</p>

												<p><span class="dropcap text-primary">D</span>orem ipsum dolor sit amet, consectetur adipisicing elit.
													 Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore, 
													 quos delectus asperiores libero voluptas quod perferendis! Voluptate, quod illo rerum? Lorem 
													 ipsum dolor sit amet.</p>
													 
												 <p class="m-b-0"><span class="dropcap text-pink">D</span>orem ipsum dolor sit amet, consectetur adipisicing elit.
												 Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore, 
												 quos delectus asperiores libero voluptas quod perferendis! Voluptate, quod illo rerum? Lorem 
												 ipsum dolor sit amet.</p>
											</div>

											<div class="col-sm-6">
												<h4 class="m-t-0 header-title"><b>Basic block</b></h4>
												<p class="text-muted m-b-15 font-13">
													Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in 
													the code for proper rendering.
												</p>

												<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<!-- End of Row -->

					</div>
					<!-- container -->

				</div>
				<!-- content -->

				<footer class="footer">
					2015 © Ubold.
				</footer>

			</div>
			<!-- ============================================================== -->
			<!-- End Right content here -->
			<!-- ============================================================== -->

			<!-- Right Sidebar -->
			<div class="side-bar right-bar nicescroll">
				<h4 class="text-center">Chat</h4>
				<div class="contact-list nicescroll">
					<ul class="list-group contacts-list">
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-1.jpg" alt="">
							</div> <span class="name">Chadengle</span> <i class="fa fa-circle online"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-2.jpg" alt="">
							</div> <span class="name">Tomaslau</span> <i class="fa fa-circle online"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-3.jpg" alt="">
							</div> <span class="name">Stillnotdavid</span> <i class="fa fa-circle online"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-4.jpg" alt="">
							</div> <span class="name">Kurafire</span> <i class="fa fa-circle online"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-5.jpg" alt="">
							</div> <span class="name">Shahedk</span> <i class="fa fa-circle away"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-6.jpg" alt="">
							</div> <span class="name">Adhamdannaway</span> <i class="fa fa-circle away"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-7.jpg" alt="">
							</div> <span class="name">Ok</span> <i class="fa fa-circle away"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-8.jpg" alt="">
							</div> <span class="name">Arashasghari</span> <i class="fa fa-circle offline"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-9.jpg" alt="">
							</div> <span class="name">Joshaustin</span> <i class="fa fa-circle offline"></i> </a>
							<span class="clearfix"></span>
						</li>
						<li class="list-group-item">
							<a href="#">
							<div class="avatar">
								<img src="assets/images/users/avatar-10.jpg" alt="">
							</div> <span class="name">Sortino</span> <i class="fa fa-circle offline"></i> </a>
							<span class="clearfix"></span>
						</li>
					</ul>
				</div>
			</div>
			<!-- /Right-bar -->

		</div>
		<!-- END wrapper -->

		<script>
			var resizefunc = [];
		</script>

		<!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>


        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

	</body>
</html>